<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模块化</title>
</head>

<body>
  <script type="module">
    // 引入03-a.js模块内容
    import * as a from "./js/03-a.js";
    console.log(a);
    console.log(a.name);
    a.change();

    console.log(a.default);
    console.log(a.default.school);
    a.default.change();

    // 2.解构赋值的方式
    import { name, change } from "./js/03-a.js";
    // 发现b模块与a模块导出的变量竟然重名了 Uncaught SyntaxError: Identifier 'name' has already been declared
    // import { name, change } from "./03-b.js";
    // 这时候怎么办呢? 看下面 我们可以使用as关键字定义一个别名 解决重名问题
    import { name as name1, change as change1 } from "./js/03-b.js";
    console.log("1.", name);
    change()
    console.log("2.", name1);
    change1()

    // 3.默认引入方式
    import { default as def1 } from "./js/03-a.js";
    console.log(def1);

    // 4.简便形式(只针对默认导出)
    import def2 from "./js/03-a.js";
    console.log(def2);
  </script>
</body>

</html>